<template><div><h1 id="javascript-新增方法" tabindex="-1"><a class="header-anchor" href="#javascript-新增方法" aria-hidden="true">#</a> JavaScript 新增方法</h1>
<p>在 ES6 中，添加了<code v-pre>Object.is()</code>、<code v-pre>Object.assign()</code>、<code v-pre>Object.keys()</code>、<code v-pre>Object.values()</code>、<code v-pre>Object.entries()</code>等方法</p>
<h2 id="_1-object-is" tabindex="-1"><a class="header-anchor" href="#_1-object-is" aria-hidden="true">#</a> 1. Object.is()</h2>
<p><code v-pre>Object.is()</code>方法用来判断两个值是否为<strong>同一个值</strong>。</p>
<p>使用语法如下，其中，<code v-pre>value1</code>和<code v-pre>value2</code>是比较的两个值。</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code>Object<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span>value1<span class="token punctuation">,</span> value2<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>Object.is()方法返回一个布尔类型的值，若满足以下条件则两个值相等：</p>
<ul>
<li>都是undefined</li>
<li>都是null</li>
<li>都是true或都是false</li>
<li>都是字符串，且相同长度、相同字符、相同顺序</li>
<li>是相同对象（每个对象有同一个引用）</li>
<li>都是数字，且满足以下任意一个
<ul>
<li>都是0</li>
<li>都是+0</li>
<li>都是-0</li>
<li>都是NaN</li>
<li>都非零，且非NaN，且是同一个值</li>
</ul>
</li>
</ul>
<p>例如，如下代码，先定义了两个空对象obj1和obj2，虽然他们都是空对象，但对象是引用数据类型，存储的是对象的地址，所以它们是不相等的。</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> obj1 <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> obj2 <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span>obj1<span class="token punctuation">,</span> obj2<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>但如果将<strong>同一个对象</strong>赋值给两个变量，那么两个变量中存储的都是<strong>同一个地址</strong>，所以他们是<strong>相等</strong>的。</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> obj1 <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> value1 <span class="token operator">=</span> obj1<span class="token punctuation">;</span>
<span class="token keyword">const</span> value2 <span class="token operator">=</span> obj1<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span>value1<span class="token punctuation">,</span> value2<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>Object.is()</code>方法与<code v-pre>===</code>不同的地方在于，<code v-pre>===</code>运算符将<code v-pre>+0</code>和<code v-pre>-0</code>视为相等，而将<code v-pre>NaN</code>与<code v-pre>NaN</code>视为不相等。</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token operator">+</span><span class="token number">0</span> <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">NaN</span> <span class="token operator">===</span> <span class="token number">NaN</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>同样的两个值，在<code v-pre>Object.is()</code>方法中的结果：</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span><span class="token operator">+</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span><span class="token number">NaN</span><span class="token punctuation">,</span> <span class="token number">NaN</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_2-object-assign" tabindex="-1"><a class="header-anchor" href="#_2-object-assign" aria-hidden="true">#</a> 2. Object.assign()</h2>
<p><code v-pre>Object.assign()</code>方法用于将所有可枚举属性的值从<strong>一个</strong>或<strong>多个源对象</strong>分配到<strong>目标对象</strong>，并<strong>返回目标对象</strong>。</p>
<p>使用语法如下，<code v-pre>target</code>是目标对象，<code v-pre>sources</code>是源对象：</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code>Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> <span class="token operator">...</span>sources<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>如下代码，将源对象<code v-pre>obj2</code>合并到目标对象<code v-pre>obj1</code>上，打印结果显示完成了合并。</p>
<p>同时，通过判断<code v-pre>res === obj1</code>为<code v-pre>true</code>，也说明了<code v-pre>Object.assign()</code>改变了第一个参数的对象，即<strong>目标对象</strong>，也说明返回值是合并后的<strong>目标对象</strong>。</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> obj1 <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> obj2 <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> res <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>obj1<span class="token punctuation">,</span> obj2<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { a: 1, b: 2 }</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res <span class="token operator">===</span> obj1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如下代码，如果目标对象和源对象中有相同的属性，那么<strong>源对象</strong>的属性将覆盖<strong>目标对象</strong>的属性：</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> obj1 <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> obj2 <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> res <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>obj1<span class="token punctuation">,</span> obj2<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { a: 2, b: 2 }</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_3-object-keys" tabindex="-1"><a class="header-anchor" href="#_3-object-keys" aria-hidden="true">#</a> 3. Object.keys()</h2>
<p><code v-pre>Object.keys()</code>方法会返回一个由一个给定对象的<strong>自身可枚举属性</strong>组成的<strong>数组</strong>，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。</p>
<p>语法如下，<code v-pre>obj</code>是待枚举的对象：</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>如下代码，遍历对象<code v-pre>obj</code>的属性，并返回一个数组：</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">d</span><span class="token operator">:</span> <span class="token number">4</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> res <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [ 'a', 'b', 'c', 'd' ]</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>注意，<code v-pre>Object.keys()</code>只能遍历到<strong>可枚举属性</strong>，有如下代码，通过<code v-pre>Object.defineProperty</code>给对象<code v-pre>obj</code>添加了一个属性<code v-pre>e</code>，但没有添加配置项<code v-pre>enumerable</code>为<code v-pre>true</code>，那么这个新添加的属性<code v-pre>e</code>就是不可枚举的，使用<code v-pre>Object.keys()</code>方法是遍历不到<code v-pre>e</code>的</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">d</span><span class="token operator">:</span> <span class="token number">4</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">'e'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> res <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [ 'a', 'b', 'c', 'd' ]</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>有关<code v-pre>Object.defineProperty</code>的更多说明，请看<a href="https://lzxjack.top/post?title=define-property" target="_blank" rel="noopener noreferrer">「JavaScript中的Object.defineProperty()方法」<ExternalLinkIcon/></a>。</p>
<h2 id="_4-object-values" tabindex="-1"><a class="header-anchor" href="#_4-object-values" aria-hidden="true">#</a> 4. Object.values()</h2>
<p><code v-pre>Object.values()</code>方法返回一个给定对象自身的所有<strong>可枚举属性值</strong>的数组，排列顺序和正常循环遍历该对象时返回的顺序一致 。</p>
<p>语法如下，<code v-pre>obj</code>是待枚举的对象：</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code>Object<span class="token punctuation">.</span><span class="token function">values</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>如下代码所示，<code v-pre>Object.values()</code>也只能遍历<strong>可枚举属性的值</strong>：</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">d</span><span class="token operator">:</span> <span class="token number">4</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">'e'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> res <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">values</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [ 1, 2, 3, 4 ]</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_5-object-entries" tabindex="-1"><a class="header-anchor" href="#_5-object-entries" aria-hidden="true">#</a> 5. Object.entries()</h2>
<p><code v-pre>Object.entries()</code>方法相当于<code v-pre>Object.keys()</code>和<code v-pre>Object.values()</code>的结合，它返回一个给定对象自身<strong>可枚举属性</strong>的<strong>键值对</strong>数组。</p>
<p>语法如下，<code v-pre>obj</code>是待枚举的对象：</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code>Object<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>如下代码所示，<code v-pre>Object.entries()</code>也只能遍历<strong>可枚举属性的键值对</strong>：</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">d</span><span class="token operator">:</span> <span class="token number">4</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">'e'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> res <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ], [ 'd', 4 ] ]</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_6-object-fromentries" tabindex="-1"><a class="header-anchor" href="#_6-object-fromentries" aria-hidden="true">#</a> 6.Object.fromEntries()</h2>
<p><code v-pre>Object.fromEntries()</code>方法可以把键值对列表转换为一个对象。该方法相当于 <code v-pre>Object.entries() </code>方法的逆过程。 <code v-pre>Object.entries()</code>方法返回一个给定对象自身可枚举属性的键值对数组，而<code v-pre>Object.fromEntries()</code> 方法把键值对列表转换为一个对象。</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> object <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">key1</span><span class="token operator">:</span> <span class="token string">'value1'</span><span class="token punctuation">,</span> <span class="token literal-property property">key2</span><span class="token operator">:</span> <span class="token string">'value2'</span> <span class="token punctuation">}</span>

<span class="token keyword">const</span> array <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span>object<span class="token punctuation">)</span>  <span class="token comment">// [ ["key1", "value1"], ["key2", "value2"] ]</span>

Object<span class="token punctuation">.</span><span class="token function">fromEntries</span><span class="token punctuation">(</span>array<span class="token punctuation">)</span>             <span class="token comment">// { key1: 'value1', key2: 'value2' }</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_7-object-defineproperty" tabindex="-1"><a class="header-anchor" href="#_7-object-defineproperty" aria-hidden="true">#</a> 7.Object.defineProperty()</h2>
<p><strong><code v-pre>Object.defineProperty()</code></strong> 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。</p>
<p>语法如下：</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code>Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> prop<span class="token punctuation">,</span> descriptor<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>参数：</p>
<ul>
<li>**<code v-pre>obj </code>**要定义属性的对象。</li>
<li><strong><code v-pre>prop</code></strong> 要定义或修改的属性的名称或 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol" target="_blank" rel="noopener noreferrer"><code v-pre>Symbol</code><ExternalLinkIcon/></a> 。</li>
<li>**<code v-pre>descriptor </code>**要定义或修改的属性描述符。</li>
</ul>
</div></template>


